<template>
    <div>
        <el-form ref="form" :model="formObj" :rules="rules" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="formObj.username" :readonly="isDetail"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="formObj.password" :readonly="isDetail"></el-input>
            </el-form-item>
            <el-form-item label="工号" prop="jobid">
                <el-input v-model="formObj.jobid" :readonly="isDetail"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="formObj.rid" :readonly="isDetail">
                    <el-option v-for="item in roleList" :label="item.rolename" :value="item.id += ''"
                        :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职务">
                <el-select v-model="formObj.duty" :readonly="isDetail">
                    <el-option v-for="item in zwList" :label="item.dicname" :value="item.id += ''"
                        :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="formObj.name" :readonly="isDetail"></el-input>
            </el-form-item>

            <el-form-item label="头像" >
                <el-upload :readonly="isDetail" class="avatar-uploader" :on-success="handleAvatarSuccess"
                    action="http://www.img.ttblog.cn/api/upload" :show-file-list="false">
                    <img v-if="imgShow" :src="`http://www.img.ttblog.cn/` + formObj.img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="formObj.sex" :readonly="isDetail">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker v-model="formObj.birthday" type="date" placeholder="选择日期" :readonly="isDetail">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="formObj.phone" :readonly="isDetail"></el-input>
            </el-form-item>
            <el-form-item label="座机号">
                <el-input v-model="formObj.tel" :readonly="isDetail"></el-input>
            </el-form-item>
            <el-form-item label="所属部门">
                <el-select v-model="formObj.department" :readonly="isDetail">
                    <el-option v-for="item in bmList" :label="item.dicname" :value="item.id += ''"
                        :key="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="负责部门">
                <el-select v-model="formObj.resdepartment" :readonly="isDetail">
                    <el-option v-for="item in bmList" :label="item.dicname" :value="item.id += ''"
                        :key="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="用户状态">
                <el-select v-model="formObj.status" :readonly="isDetail">
                    <el-option label="冻结" value="0"></el-option>
                    <el-option label="正常" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { selectSystemUserById } from '@/api/systemManager'
import bus from '@/components/common/bus';
export default {
    data() {
        return {
            formObj: {},
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            imgShow: false,
            rules: {
                jobid: [
                    {
                        validator: (rule, value, callback) => {
                            if (!/^\d+$/.test(value)) {
                                callback(new Error('请输入纯数字'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'blur'
                    }]
            }
        }
    },
    mounted() {
        if (this.isEdit) {
            this.getData()
        }
        if (this.isDetail) {
            this.getData()
        }
    },
    props: ['id', 'isEdit', 'isDetail', 'roleList', 'zwList', 'bmList'],

    methods: {
        //获取用户数据
        async getData() {
            let result = await selectSystemUserById({ id: this.id })
            if (result.code == 200) {
                this.formObj = result.data
                this.formObj.rid += ''
                this.formObj.duty += ''
                this.formObj.status += ''
                this.dialogImageUrl = this.formObj.img
                this.imgShow = true
            }
        },


        handleAvatarSuccess(res, file) {
            this.formObj.img = res.data.slice(res.data.lastIndexOf('/') + 1, res.data.length);
            this.imgShow = true

        },
    },
    watch: {
        formObj: {
            immediate: true,
            handler(val) {
                bus.$emit('getFormObj', val)
            }
        }
    }


}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.el-upload--text {
    width: auto
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 100%;
    height: 100%;
    display: block;
}
</style>